<template>
  <div class="video-recommend">
    <h2>推荐视频</h2>
    <!-- 使用栅格系统替代表格 -->
    <el-row :gutter="20">
      <el-col
          v-for="video in videos"
          :key="video.id"
          :xs="24"
          :sm="12"
          :md="8"
          :lg="6"
      >
        <el-card class="video-card" shadow="hover" @click="openVideo(video.url)">
          <div class="video-cover">
            <img :src="'/img'+video.face" :alt="video.title" />
            <span class="video-duration">{{ formatDuration(video.length) }}</span>
          </div>

          <div class="video-info">
            <h3>{{ video.title }}</h3>
            <p class="video-link">{{ video.url }}</p>
            <div class="video-meta">
              <el-avatar :size="24" :src="'/img'+video.tx || 'https://via.placeholder.com/40'" />
              <span class="video-author">@{{ video.yhm }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import {nextTick, onMounted, ref} from 'vue'
import axios from 'axios'
import router from "@/router/index.js";

const videos = ref([])

// 格式化视频时长（秒转为分:秒）
const formatDuration = (seconds) => {
  if (!seconds) return '0:00'
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

const doList = async () => {
  try {
    const { data } = await axios.get('/api/video')
    videos.value = data
  } catch (error) {
    console.error('获取视频列表失败:', error)
  }
}
const openVideo = (filePath) => {
  router.push({
    path: '/video/open',
    query: {
      url: filePath
    }
  })

}
onMounted(doList)
</script>

<style scoped>
.video-recommend {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.video-card {
  margin-bottom: 20px;
  transition: transform 0.2s ease;
  height: 100%;
}

.video-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.video-cover {
  position: relative;
  padding-top: 56.25%; /* 16:9 比例 */
  overflow: hidden;
  border-radius: 4px;
}

.video-cover img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-duration {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
}

.video-info {
  padding: 12px 0;
}

.video-info h3 {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 500;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.video-link {
  font-size: 12px;
  color: #666;
  margin-bottom: 8px;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-meta {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #999;
}

.video-meta .el-avatar {
  margin-right: 8px;
}

.video-author {
  margin-right: 8px;
  color: #606266;
}
</style>